<template>
  <h1>1.组件的基本写法</h1>
  <p>name:{{pearson.name}}</p>
  <p>age:{{pearson.age}}</p>
  <hr>
  <p>name:{{name}}</p>
  <p>age:{{age}}</p>
  <button @click="changePearson">修改pearson</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
  import {reactive,toRefs} from 'vue'
  const pearson = reactive({
    name:'小小',
    age:18
  })
  let {name,age} = toRefs(pearson)
  console.log(name,age);
  
  const changePearson = () => {
    age.value++
  }
</script>